<template>
  <div style="margin: 0 auto;width: 1900px;">
    <el-container>
      <el-header class="layout-header">
        <el-menu style="width: 700px;height:60px; margin-left: 600px"
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">风格作品</template>
            <el-menu-item index="2-1">中式风格</el-menu-item>
            <el-menu-item index="2-2">韩式风格</el-menu-item>
            <el-menu-item index="2-3">森系风格</el-menu-item>
            <el-menu-item index="2-4">田园风格</el-menu-item>
            <el-menu-item index="2-5">纪实婚礼</el-menu-item>
            <el-menu-item index="2-6">法式风格</el-menu-item>
            <el-menu-item index="2-7">创意婚照</el-menu-item>
            <el-menu-item index="2-8">旅拍作品</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">套餐报价</el-menu-item>
          <el-menu-item index="4">旅拍</el-menu-item>
          <el-menu-item index="5">优惠活动</el-menu-item>
          <div style="float: right;position:relative;top:-50px">
            <el-input placeholder="请输入搜索内容">
              <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-menu>
      </el-header>
      <el-main class="layout-main">
        <template>
          <div class="block">
            <el-carousel height="650px">
              <el-carousel-item v-for="url in bannerArr">
                <img :src="url" width="100%" height="100%" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
       <h1 align="center">套餐报价</h1>
        <p align="center" id="p1">在线了解报价，0元预约拍摄档期</p>
        <div id="z_div">
          <div class="t_div">
            <a href="">
              <img class="m_img" src="https://jmy-pic.baidu.com/0/pic/652875740_-1602747263_-1064389316.jpg" alt=""><br>
              <p align="center" class="p2">0元预约档期</p>
            </a>
          </div>

          <div class="t_div">
            <a href="">
              <img class="m_img" src="https://jmy-pic.baidu.com/0/pic/-1036388721_-833086153_1969791617.jpg" alt=""><br>
              <p align="center" class="p2">人气优选套餐</p>
            </a>
          </div>

          <div class="t_div">
            <a href="">
              <img class="m_img" src="https://jmy-pic.baidu.com/0/pic/-1642898962_1680052009_-810247539.jpg" alt=""><br>
              <p align="center" class="p2">店长推荐套餐</p>
            </a>
          </div>

          <div class="t_div">
            <a href="">
              <img class="m_img" src="https://jmy-pic.baidu.com/0/pic/1061003840_590400710_-1911383831.jpg" alt=""><br>
              <p align="center" class="p2">性价比之选</p>
            </a>
          </div>
        </div>
        <div>
        </div>
      </el-main>
      <el-header class="layout-header_two">
        <div id="bor">
          <a href="">
            <p id="p2"> 查看更多报价</p>
          </a>
        </div>
      </el-header>
      <el-main class="layout-main_two">
        <h1 id="H1" align="center">婚纱照风格作品</h1>

        <div style="margin: 0 auto;width:1500px;">
          <div class="zon-Div">
            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/-1868733197_-1879213714_-1046912160.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>韩式风格婚纱照</h3>
                  <span>内景婚纱照</span>
                  <span>韩式风格婚纱照</span>
                  <p class="card-p">拍摄特点:粉色、内景,纯色,简约;优惠活动:在线预约可享受3000元现金优惠...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/-1527057315_-1341164139_-1303121019.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>纯色经典韩式</h3>
                  <span>韩式婚纱照</span>
                  <span>纯色韩风</span>
                  <span>婚纱照</span>
                  <p class="card-p">【拍摄特点】韩式、简约,纯色、背景拍摄;【优惠活动】在线预约可享受3000...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/226207492_-1625599288_-1623415451.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>中式经典</h3>
                  <span>中式婚纱照</span>
                  <span>国风婚纱照</span>
                  <span>中式</span>
                  <span>中式服装</span>
                  <p class="card-p">【拍摄特点】中国风、红色,喜庆、中式服装;【优惠活动】在线预约可享受...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="zon-Div">
            <div class="Div1">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/-1656657742_-1554886728_580966909.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>魔幻创意</h3>
                  <span>创意</span>
                  <span>梦幻</span>
                  <span>外景</span>
                  <span>森系</span>
                  <p class="card-p">【拍摄特点】拍摄特点:森系、梦幻,绿色、创意、外景;【优惠活动】:在线...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div1">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/1233627312_2054615953_-1983502759.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>蓝色国风</h3>
                  <span>中国风</span>
                  <span>内景婚纱照</span>
                  <span>纯色拍摄</span>
                  <p class="card-p">【拍摄特点】新中式、国风、内景、背景拍摄、中式旗袍;【优惠活动】在线...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div1">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/-1385854180_-20354853_1485731037.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>定制油画风</h3>
                  <span>定制拍摄</span>
                  <span>内景拍摄</span>
                  <p class="card-p">【拍摄特点】复古、中式,内景、创意;咨询客服可获取报价及拍摄档期!</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-main>
      <el-header class="layout-header_three">
        <div class="bor3-card">
          <a href="">
            <p class="p3-card">查看更多作品</p>
          </a>
        </div>
      </el-header>
      <el-main>
        <img class="img-only" src="https://jmy-pic.baidu.com/0/pic/298762691_-1135383270_-587609048.jpg" alt="">
        <h1 align="center">旅拍作品</h1>
        <div style="margin: 0 auto;width: 1500px;">
          <div class="zon-Div">
            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/999996663_464791777_863231286.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>杭州旅拍</h3>
                  <span>杭州</span>
                  <span>旅拍</span>
                  <span>茶园</span>
                  <span>建筑</span>
                  <p class="card-p">【拍摄特点】:外景、建筑、湖景、茶园、蓝色婚纱;【优惠活动】:在线预约...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/1097561557_779392248_-2013597956.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>济州岛旅拍</h3>
                  <span>济州岛</span>
                  <span>海景</span>
                  <span>街景</span>
                  <span>码头</span>
                  <span>礁石</span>
                  <p class="card-p">【拍摄特点】海景、街景、礁石、码头、海岸;【优惠活动】在线预约可享...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>

            <div class="Div">
              <div class="m_div">
                <a href="">
                  <img class="t_img" src="https://jmy-pic.baidu.com/0/pic/1750119846_1513466535_1455017259.jpg" alt="">
                </a>
              </div>
              <div class="n_div" >
                <div class="card-h">
                </div>
                <a href="">
                  <h3>丽江</h3>
                  <span>丽江</span>
                  <span>旅拍</span>
                  <p class="card-p">【拍摄特点】丽江、拉市海、旧建筑、街拍【优惠活动】在线预约可享受300...</p>
                </a>
                <div class="bor-card">
                  <a href="">
                    <p class="p2-card">咨询价格</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-header class="layout-header_three">
        <div class="bor3-card">
          <a href="">
            <p class="p3-card">查看更多旅拍</p>
          </a>
        </div>
      </el-header>
      <el-main>
        <img class="img-only_one" src="https://jmy-pic.baidu.com/0/pic/-915323587_735062954_785577640.jpg" alt="">
      </el-main>
      <el-header class="layout-header_three">
        <div class="bor3-card">
          <a href="">
            <p class="p3-card">查看更多攻略</p>
          </a>
        </div>
      </el-header>
      <el-main>
        <img class="img-only_one" src="https://jmy-pic.baidu.com/0/pic/493092927_-281048609_494643096.jpg" alt="">
      </el-main>
      <el-footer class="layout-footer">
        <div id="Footer">
          <div class="footer-zon">
            <div class="icon-guarantee-content">
              <a href="">
                <img src="icon01.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <h4 class="H4">协助维权</h4>
                <p class="P4">蒙受经济损失,可申请百度协助</p>
              </a>
            </div>
          </div>

          <div class="footer-zon">
            <div class="icon-guarantee-content">
              <a href="">
                <img src="icon02.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <h4 class="H4">虚假赔偿</h4>
                <p class="P4">遇到品牌或资质冒用,可申请百度保障</p>
              </a>
            </div>
          </div>

          <div class="footer-zon">
            <div class="icon-guarantee-content">
              <a href="">
                <img src="icon03.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <h4 class="H4">欺诈赔偿</h4>
                <p class="P4">遇到欺诈,经核查属实,可申请保障退还费用</p>
              </a>
            </div>
          </div>
        </div>
      </el-footer>
      <el-footer class="layout-footer">
        <div id="Footer-head">
          <div class="Footer-top">
            <a href=""><span class="span-top">首页</span></a>
          </div>
          <div class="Footer-top">
            <a href=""><span class="span-top">风格作品</span></a>
          </div>
          <div class="Footer-top">
            <a href=""><span class="span-top">套餐报价</span></a>
          </div>
          <div class="Footer-top">
            <a href=""><span class="span-top">旅拍</span></a>
          </div>
          <div class="Footer-top">
            <a href=""><span class="span-top">优惠活动</span></a>
          </div>
        </div>
        <p id="p-end">Copyright © 哪拍科技（北京）有限公司 地址：北京市北京市海淀区中关村东升科技园</p>
      </el-footer>
    </el-container>
  </div>
</template>
<style>
.layout-header{
  background: #545c64;
}

.layout-main{
}
.layout-header_two{
  margin-top: 40px;
  margin-left: 730px;
}
#bor{
  background-color: white;
  width: 400px;
  height: 55px;
  border-radius: 30px;
  border: 1px solid #d9d9d9;
}
#p2{
  color: #595959;
  font-size: 20px;
  margin-left:150px;
  margin-top: 15px;
  display: inline-block;
}
#H1{
  margin-top: 80px;
}
.layout-main_two{

}
.zon-Div{
  margin-left: 120px;
}
.Div{
  width: 395px;
  height: 520px;
  margin-top: 40px;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  box-shadow: 0 0 3px 3px #f5f5f5;
  margin-left: 15px;
  float: left;
}
.Div1{
  width: 395px;
  height: 520px;
  margin-top: 40px;
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  box-shadow: 0 0 3px 3px #f5f5f5;
  margin-left: 15px;
  float: left;
}
.m_div{
  width: 335px;
  height: 251px;
  background-color: #42b983;
  margin: 30px;
  border-radius: 4px;
  overflow: hidden;
}
.t_img:hover{
  /*让图片缩放1.25倍*/
  transform: scale(1.3);
}
.t_img{
  width: 335px;
  height: 251px;
  /*设置动画持续时间*/
  transition-duration: 0.6s;
}
.card-h{
  width: 5px;
  height: 25px;
  background-color: black;
  margin-top: -7px;
}
h3{
  color: black;
  margin:-25px 0 0 20px ;
}
span{
  font-size: 10px;
  color: black;
  display: inline-block;
  padding: 5px;
  margin:10px 0 0 20px;
  background-color: #d9d9d9;
}
.card-p{
  font-size: 20px;
  color: #8c8c8c;
  margin: 10px 20px;
}
.bor-card{
  background-color: #d9d9d9;
  width: 350px;
  height: 50px;
  margin:5px 20px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
}
.p2-card{
  color: #595959;
  font-size: 20px;
  margin-left:132px;
  margin-top: 10px;
  display: inline-block;
}
.layout-footer{
  margin: 0 auto;
  width: 1500px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
h1{
  font-weight: normal;/*去掉加粗*/
  margin: 30px 0 0 0;
  font-size: 30px;
}
#p1{
  font-size: 20px;
  margin-top: 16px;
  margin-bottom: 33px;
  color: #999;
}
#z_div{
  margin-left: 310px;
}
.t_div{
  width: 280px;
  height: 260px;
  background-color: white;
  border-radius: 4px;
  margin-left: 20px;
  float: left;
  border: 1px solid #f5f5f5;
  overflow: hidden;
}
.t_div:hover{
  position: relative;
  /*设置元素阴影:x偏移值 y偏移值 浓度 范围 颜色*/
  box-shadow: 0 0 5px 5px #f5f5f5;
}
.m_img{
  width: 280px;
  height: 200px;
  /*设置动画持续时间*/
  transition-duration: 0.6s;
}
.m_img:hover{
  /*让图片缩放1.25倍*/
  transform: scale(1.1);
}

a{
  text-decoration: none;
  display: block;
}
.p2{
  margin: 10px;
  color: rgb(51,51,51);
  font-weight: 500;
  font-size: 20px;
}
.layout-header_three{
  margin-top: 40px;
  margin-left: 660px;
}
.bor3-card{
  background-color: white;
  width: 500px;
  height: 60px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
}
.p3-card{
  color: #595959;
  font-size: 20px;
  margin-left:190px;
  margin-top: 18px;
  display: inline-block;
}
.img-only{
  width: 1650px;
  height: 582px;
  margin: 10px 0 0 110px;
}
.img-only_one{
  width: 1650px;
  height: 650px;
  margin: 10px 0 0 110px;
}

.icon-guarantee-content{
  font-size: 40px;
  color: black;
}
.H4{
  margin:-60px 0 0 60px;
  color: black;
}
.P4{
  margin: 10px 0 0 60px;
  font-size: 12px;
  color: #ccc;
}
.footer-zon{
  margin-left: 80px;
  float: left;
}
#Footer{
  margin:20px 0 0 200px;
}
#Footer-head{
  margin-left: 250px;
}
.Footer-top{
  float: left;
  margin-top: 40px;
  margin-left: 90px;
}
.span-top{
  padding: 0;
  background-color:white;
  font-size: 20px;
}
#p-end{
  margin: 120px 0 0 420px;
}
</style>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      bannerArr:["https://jmy-pic.baidu.com/0/pic/1333620710_-2039121205_-359340925.jpg@f_webp,q_90","01.image.png","02.image.png"]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },


}
</script>
